<template>
  <div class="g-inherit m-main p-session">
    <div class="u-list" style="margin:0">

      <div
        v-for="session in sessionlist"
        class="u-list-item"
        :title="session.name"
        :label="session.lastMsgShow"
        :key="session.chatGroupId"
        :sessionId="session.id"
        @click.native="enterChat(session)" >
          <div class="icon-box">
            <!-- 小圆圈，有未读消息的时候是红色，没有未读消息的时候是灰色 -->
            <div class="left-dot" :class="{unread: session.unread > 0}"></div>
            <div  class="img-box">
              <img class="u-circle" width="100%" :src="session.icon" style="border-radius:0;">
            </div>
          </div>
          <!-- 可以从后台通过sessionlist获取，以后需要修改 -->
          <div class="docname">
            <div style="line-height: 1em;">{{session.custom.name}}</div>
            <div class="docdesc" style="line-height: 1em;">
              <span>{{session.custom.hospital}}</span>
              <span>{{session.custom.section}}</span>
            </div>
          </div>
          
          <!-- 显示最后一条消息 -->
          <div class="lastMsg" v-if="session.lastMsgShow">
            <span>对话：</span>
          {{session.lastMsgShow | cutLastMsgShow}}
            <span class="session-time">
              {{session.lastTimeShow}}
            </span>
            <!-- <span class="session-time">
              {{session.lastMsg.time}}
            </span>    -->
          </div>
          <div class="lastMsg" v-else>历史数据正在加载中...</div>
          </span>
      </div>
    </div>
  </div>
</template>

<script>
import util from '../../utils'
import config from '../../configs'
import doctorImg from '@/assets/images/mdoctor.png'
import { getPatientSessionList } from '@/api/dialog'
export default {
  created() {
		let openid = this.$route.query.openid
    getPatientSessionList(openid).then(res => {
      // 将获得的患者sessionlist保存到store里面
      this.ownsessionlist = JSON.parse(res.data.data)
      // 遍历从数据库拿到的数据
      this.ownsessionlist.forEach(ownitem => {
      // 数据格式化部分医生的信息
        ownitem.custom = JSON.parse(ownitem.custom)
        ownitem.icon = ownitem.icon || this.doctorImg
      })
    })
	},
  data () {
    return {
      delSessionId: null,
      stopBubble: false,
      noticeIcon: config.noticeIcon,
      myPhoneIcon: config.myPhoneIcon,
      myGroupIcon: config.defaultGroupIcon,
      myAdvancedIcon: config.defaultAdvancedIcon,
      defaultUserIcon: config.defaultUserIcon,
      defaultAdvancedIcon: config.defaultAdvancedIcon,
      doctorImg: doctorImg,
      ownsessionlist: [],
      // 需要展示的数据
      showsessionlist: [],
    }
  },
  computed: {
    sysMsgUnread () {
      let temp = this.$store.state.sysMsgUnread
      let sysMsgUnread = temp.addFriend || 0
      sysMsgUnread += temp.team || 0
      let customSysMsgUnread = this.$store.state.customSysMsgUnread
      return sysMsgUnread + customSysMsgUnread
    },
    userInfos () {
      return this.$store.state.userInfos
    },
    myInfo () {
      return this.$store.state.myInfo
    },
    myPhoneId () {
      return `${this.$store.state.userUID}`
    },
    openid () {
      let openid = this.$route.query.openid
      return openid
    },
    sessionlist () {
      let sessionlist = this.$store.state.sessionlist
      let ownsessionlist =this.ownsessionlist
      ownsessionlist.forEach(ownitem => {
        // 遍历从网易拿到的sessionlist，将相关字段拼接到ownsessionlist里面
        sessionlist.forEach(sessionitem => {
          // 处理最后一条信息
          let lastMsg = sessionitem.lastMsg || {}
          if (lastMsg.type === 'text') {
            sessionitem.lastMsgShow = lastMsg.text || ''
          } else if (lastMsg.type === 'custom') {
            sessionitem.lastMsgShow = util.parseCustomMsg(lastMsg)
          } else if (lastMsg.scene === 'team' && lastMsg.type === 'notification') {
            sessionitem.lastMsgShow = util.generateTeamSysmMsg(lastMsg)
          } else if (util.mapMsgType(lastMsg)) {
            sessionitem.lastMsgShow = `[${util.mapMsgType(lastMsg)}]`
          } else {
            sessionitem.lastMsgShow = ''
          }
          if (sessionitem.lastMsg.time) {
            sessionitem.lastTimeShow = util.formatDate(sessionitem.lastMsg.time, true)
          }
          // 拼接对象
          if(sessionitem.to === ownitem.chatGroupId) {
            ownitem = Object.assign(ownitem,sessionitem)
          }
        })
      })
      return ownsessionlist
    }
  },
  methods: {
    // 进入聊天页面，通过sessionId进入
    enterChat (session) {
      let sessionId = "team-" + session.chatGroupId
      // let patienterId = session.patienterId
      let doctorid = session.custom.name
      let sessionName = session.custom.name
      let openid = this.$route.query.openid
      if (this.hideDelBtn())
        return
      if (session && sessionId)
        // 跳转到患者聊天页面，并带上医生名称
        this.$router.push({path:`/patientChat/${sessionId}`,query:{doctorid,openid}})
 
    }
  },
  filters: {
    cutLastMsgShow (msg) {
			if(msg && msg.toString().length> 9)
        return msg.toString().substr(0,9) + '...'
      else
        return msg
    }
  }
}
</script>

<style type="text/css" lang="stylus">
  .p-session
    .vux-cell-primary
      max-width: 70%
    &.m-main
      background: #f1f1f1
    .u-list
      margin-top: -60px
      background: #f1f1f1
      -webkit-box-align: top
      align-items: top
      .u-list-item
        position: relative
        background: #fff
        min-height: 2.6rem
        padding: 1rem 0.7rem 2rem .7rem;
        border-bottom: 1px solid #eee;
        .icon-box
          width:3rem
          height:2rem
          margin-right:.5rem
          display: flex
          float: left
          .left-dot
            display: inline-block
            width: 9px
            height: 9px
            border-radius : 50%
            background: #777
            vertical-align :top
            margin-top: .8rem
            &.unread
              background: red
          .img-box
            width: 2rem
            height: 2rem
            margin-left: .5rem
            border-radius: 0
            display: inline-block
            // border: 1px solid #f0f0f0
            overflow: hidden
            img
              width: 100%
        .u-unread
          width:.5rem
          height:.5rem
          line-height:1rem
          left:2rem
          top:.6rem
        .docname
          float: left
          font-size: 1.1875rem
          color: #333
        .docdesc
          width: 100%
          padding-right: 10px
          box-sizing: border-box
          font-size: 0.9375rem
          color: #666
        .lastMsg
          position:absolute
          left:1rem
          top:3.5rem
          font-size: 0.9375rem
          // border: 1px solid red
          width: 100%
          color: #333
          span
            color: #777777
          .session-time
            position: absolute
            right: 20px
            color: #777
            font-size: 0.9375rem

        .u-session-time
          color: #ddd
          right:10px
          top:4rem
          font-size:.8rem
</style>
